<template>
  <section class="statistics-view">
    <section class="view-search">
      <section class="search-title">统计条件</section>
      <section v-if="obj.org && obj.org.length > 0" class="search-item">
        <section class="item-label">部门：</section>
        <section class="item-value">
          <span v-for="(item, index) in obj.org" :key="index">
            {{ item }}
            <span v-if="index < obj.org.length - 1">、</span>
          </span>
          <span v-if="obj.down">(包含下级部门)</span>
          <span v-if="obj.all">(部门所有人员)</span>
        </section>
      </section>
      <section v-if="!obj.all && obj.name" class="search-item">
        <section class="item-label">用户名：</section>
        <section class="item-value">{{ obj.name }}</section>
      </section>
      <section v-if="!obj.all && obj.phone" class="search-item">
        <section class="item-label">手机号：</section>
        <section class="item-value">{{ obj.phone }}</section>
      </section>
      <section v-if="obj.rush && obj.rush.length > 0" class="search-item">
        <section class="item-label">来源：</section>
        <section class="item-value">
          <span v-for="(item, index) in obj.rush" :key="index">
            {{ item }}
            <span v-if="index < obj.rush.length - 1">、</span>
          </span>
        </section>
      </section>
      <section v-if="obj.startTime" class="search-item">
        <section class="item-label">开始时间：</section>
        <section class="item-value">{{ obj.startTime }}</section>
      </section>
      <section v-if="obj.endTime" class="search-item">
        <section class="item-label">结束时间：</section>
        <section class="item-value">{{ obj.endTime }}</section>
      </section>
    </section>
    <v-table :list="list" tag="scorestatisticsview" :list-loading="listLoading" :filter-column="filtercolumn" :selection="false" />
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </section>
</template>
<script>
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import { queryViewPage } from '../api/index'
import CryptoJS from '@/utils/aesJiaJM'
export default {
  name: 'StatisticsView',
  components: { Pagination, VTable },
  props: {
    id: {
      type: String,
      default: ''
    },
    obj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 10,
      listLoading: false,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    filtercolumn(scope, item) {
      if (item === 'questionIdValue') {
        return scope.row[item] ? scope.row[item] : '未设置'
      } if (item === 'userPhoneNumber') {
        return CryptoJS.$aesJieM(scope.row[item])
      } else if (item === 'userIdNumber') {
        return CryptoJS.$aesJieM(scope.row[item])
      } else {
        return scope.row[item]
      }
    },

    getList(obj) {
      this.listLoading = true
      var query = {
        taskId: this.id,
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryViewPage(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }
}
</script>
<style lang="scss">
.statistics-view {
  .view-search {
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .search-title {
      font-size: 14px;
      color: #72767b;
    }
    .search-item {
      padding: 5px 10px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      color: #72767b;
    }
  }
  .table-container .el-table__body-wrapper {
    min-height: calc(100vh - 220px);
    max-height: calc(100vh - 220px);
    overflow: auto;
    position: relative;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
  }
}
</style>
